<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>杭白政绩</title>
	<link rel="stylesheet" href="./css/base.css" />
	<link rel="stylesheet" href="./iconfont/font_fangdajin/iconfont.css" />
	<link rel="stylesheet" href="./css/杭白政绩.css" />
</head>

<body>
	<div id="trail-container"></div>
	<!-- 快捷导航模块开始 -->
	<div class="shortcut">
		<div class="w">
			<div class="LOGO">
				<img src="./img/d.png" alt="logo" />
			</div>
			<div class="Module_classify">
				<ul>
					<li><a href="首页.html">首页</a></li>
					<li><a href="杭州刺史.html">杭州刺史</a></li>
					<li><a href="杭白政绩.html">杭白政绩</a></li>
					<li><a href="经典之作.html">经典之作</a></li>
					<li><a href="登录界面.html">登录</a></li>
				</ul>
			</div>

			<div class="search">
				<input type="search" placeholder="获取帮助" />
				<button><span class="iconfont icon-fangdajing"></span></button>
			</div>
		</div>
	</div>
	<!-- 快捷导航模块结束 -->

	<!-- 背景＋名字模块制作开始 -->
	<div class="bglo">
		<div class="rotate3d">
			<!-- rotate3d相册容器 -->
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
	<!-- 背景＋名字模块制作结束 -->


	<!-- main部分制作开始 -->
	<div class="main w">
		<div class="main_head">
			<h2>人物成就</h2>
			<p>Character achievements</p>
		</div>
		<div class="main_left">
			<img src="./img/hangbaizhengjibyt.png" alt="白居易" />
		</div>
		<div class="main_right">
			<div class="mainr_left">
				<img src="./img/hangbaizhengjijkt.png" alt="" />
			</div>
			<!-- 表格制作开始 -->
			<div class="mainr_right">
				<table id="bd" border="2" width="350" height="500">
					<tbody>
						<tr>
							<td>水利建设</td>
							<td>
								白居易主持疏浚了杭州的六口古井，解决了当地居民的饮水问题。
								他还修筑了堤坝，蓄积湖水，以利于灌溉，缓解旱灾的影响，
								并撰写《钱塘湖石记》，将治理湖水的政策和方法刻石立于湖边，
								对后世产生了深远影响。
							</td>
						</tr>
						<tr>
							<td>文化推广</td>
							<td>
								白居易在杭州期间创作了大量诗歌，数量达到两百多首，成为历史上咏赞西湖最多的诗人。
								他的诗歌不仅丰富了杭州的文化底蕴，还吸引了更多的文人墨客，提升了杭州的文化地位。
							</td>
						</tr>
						<tr>
							<td>城市建设</td>
							<td>
								虽然后世误传白居易修筑了白堤，但事实上他在杭州时确实对西湖周边的建设有所贡献，包括疏浚西湖和修建堤坝等
							</td>
						</tr>
						<tr>
							<td>社会教化</td>
							<td>
								白居易通过诗歌潜移默化地教化了杭州的百姓，提高了当地人民的文化素养，使杭州成为了东南地区的诗城
							</td>

						</tr>
						<tr>
							<td>民生关怀</td>
							<td>
								白居易对杭州人民的生活状况表示了深切的关怀，他在《别州民》一诗中表达了对群众负担重税的难过和对自己未能为群众多办事的不安
							</td>

						</tr>
					</tbody>
				</table>
			</div>
			<!-- 表格制作结束 -->
		</div>


	</div>
	<!-- main部分制作结束 -->

	<!-- 结束部分footer制作开始 -->
	<footer>
		<h1>杭州相关名人和古诗</h1>
		<P>请联系我们<a href="19857979455 ">19857979455</a> | 邮箱地址：<a href="3086547255@qq.com">3086547255@qq.com</a></P>
		<h3>版权所有&copy
			浙金院官网
			人工231王家侃
			学号2023630113
		</h3>
	</footer>
	<!-- 结束部分footer制作结束 -->

	<script>
		// 鼠标拖尾效果
		document.addEventListener('DOMContentLoaded', () => {
			const trailContainer = document.getElementById('trail-container');
			const particles = [];
			let lastParticleTime = 0; // 用于记录上次生成粒子的时间

			document.addEventListener('mousemove', (e) => {
				const now = Date.now();
				if (now - lastParticleTime > 50) { // 控制生成频率
					createParticle(e.clientX, e.clientY);
					lastParticleTime = now;
				}
			});

			function createParticle(x, y) {
				const particle = document.createElement('img');
				particle.src = './img/shuimotexiao(dan).png'; // 使用透明背景图片
				particle.classList.add('particle');
				particle.style.left = `${x - 5}px`;
				particle.style.top = `${y - 5}px`;
				trailContainer.appendChild(particle);
				particles.push(particle);

				setTimeout(() => {
					particle.classList.add('fade');
					particle.addEventListener('animationend', () => {
						particle.remove();
						particles.splice(particles.indexOf(particle), 1);
					});
				}, 100); // 迅速开始淡出
			}

			setInterval(() => {
				particles.forEach((particle) => {
					if (particle.classList.contains('fade')) {
						particle.remove();
						particles.splice(particles.indexOf(particle), 1);
					}
				});
			}, 1000);

		});
	</script>
</body>

</html>